$(function() {
    // 获取表单
    var form = layui.form
    form.verify({
        username: [
            /^[\w]{6,12}$/, '长度必须2到12位'
        ],
        pass: [
            /^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'
        ],
        nickname: [
            /^[\S]{2,6}$/, '长度必须2到6位，且不能出现空格'
        ],
        repass: function(value) {
            if (value !== $('#password').val()) {
                return '两次密码必须一致!'
            }
        }
    })

    // 屏蔽关键字
    $('#nickname').keyup(function() {
        $(this)[0].value = $(this)[0].value.replace(/傻逼|傻\s*逼/g, '**')
    })


    $('#form-add').submit(function(e) {
        e.preventDefault()
        $.ajax({
                url: '/admin/users',
                method: 'POST',
                data: $(this).serialize(),
                success: function(res) {
                    if (res.status != 0) {
                        return layer.msg(res.message)
                    }
                    // 提示消息
                    layer.msg('添加成功')
                        // 清空表单
                    $('#form-add')[0].reset()

                }
            })
            // 跳转页面
        location.href = './user.html'
    })


    // 3. 初始化裁剪区
    // 3.1 初始化图片裁剪器
    var $image = $('#image');

    // 3.2 裁剪选项
    var options = {
        aspectRatio: 400 / 280,
        preview: '.img-preview',
    };

    // 3.3 初始化裁剪区域
    $image.cropper(options);

    // 4. 点击封面,弹出文件选择框
    $('#choose-cover').click(function() {
        $('#file').click();
    });

    // 5. 监听文件框的 change 事件,替换裁剪区图片
    $('#file').change(function() {
        // 5.1 获取用户选择的图片
        var files = this.files;

        // 5.2 判断用户是否选择了图片
        if (files.length == 0) {
            return;
        }

        // 5.3 替换裁剪区的图片
        // 根据文件，创建对应的 URL 地址
        var newImgURL = URL.createObjectURL(files[0]);
        // 为裁剪区域重新设置图片
        $image
            .cropper('destroy') // 销毁旧的裁剪区域
            .attr('src', newImgURL) // 重新设置图片路径
            .cropper(options); // 重新初始化裁剪区域


        // 图片
        $('#upload-image').click(function() {
            var dataURL = $image
                .cropper('getCroppedCanvas', {
                    // 创建一个 Canvas 画布
                    width: 100,
                    height: 100,
                })
                .toDataURL('image/png')
            console.log(dataURL); //base64格式头像
            $('#ico').val(dataURL)
            layer.msg('头像上传成功');
        })

        $('#rest-img').on('click', function() {
            $('#ico').val('');
            layer.msg('请重新选择头像');
        })


    });

})